<template>
	<view>
		<!-- 导航栏 -->
		<view class="flex justify-between align-center mainBgColor navbar" >
			<view class="flex align-center" style="padding: 0 8px;">
				<u-icon name="arrow-left" size="21" color="#ffffff" @click="toBack()"></u-icon>
			</view>
			
			<view>
				<text class="font-16 color-white">故障件条码</text>
			</view>
			
			<view class="flex align-center mar-r-10">
				<u-icon name="plus" size="20" color="#ffffff" class="mar-r-10" @click="add()"></u-icon>
				<u-icon name="checkbox-mark" size="20" color="#ffffff" @click="save()"></u-icon>
			</view>
		</view>
		
		<view>
			<view class="flex h-px-40 bg-white">
				<view class="flex flex-1 align-center justify-center font-14" style="border-right: 1px #e6e6e6 solid;">
					<text>旧件追溯号</text>
				</view>
				
				<view class="flex flex-1 align-center justify-center font-14">
					<text>新件追溯号</text>
				</view>
			</view>
			
			<view >
				<view
					v-for="(item, index) in list"
					:key="index"
					class="flex h-px-40 bg-white"
					style="border-top: 1px #e6e6e6 solid;"
				>
					<view class="flex flex-1 align-center justify-center font-14" style="border-right: 1px #e6e6e6 solid;">
						<u-input v-model="item.OldTraceNum" inputAlign="center" customStyle="height: 20px;" class="mar-x-5"></u-input>
						<text class="iconfont icon-iconfontscan mar-x-5" style="font-size: 24px; color: #3c9cff;" @click="handleScan(index, 'OldTraceNum')"></text>
					</view>
					
					<view class="flex flex-1 align-center justify-center font-14">
						<u-input v-model="item.NewTraceNum" inputAlign="center" customStyle="height: 20px;" class="mar-x-5"></u-input>
						<text class="iconfont icon-iconfontscan mar-x-5" style="font-size: 24px; color: #3c9cff;" @click="handleScan(index, 'NewTraceNum')"></text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Utils from '@/utils/utils'
	
	import { mapState } from 'vuex'
	import { checkLogin } from '@/utils/lib'
	import { saveBarcodeList } from '@/apis/applyTask'
	
	export default {
		computed: {
			...mapState({
				token: state => state.user.token,
				longitude: state => state.user.longitude,
				latitude: state => state.user.latitude,
				repairList: state => state.repair.repairList
			})
		},
		
		data() {
			return {
				// 记录当前故障件的 id
				repairOrderItemId: '',
				
				// 记录点击的是故障件列表中的索引
				index: null,
				
				// 新旧故障件列表
				list: []
			}
		},
		
		onLoad(options) {
			if (options.repairOrderItemId) {
				this.repairOrderItemId = options.repairOrderItemId
			}
			
			this.index = parseInt(options.index)
			this.initData()
		},
		
		onShow() {
			checkLogin()
			this.getScanResult() // 获取扫码结果
		},
		
		methods: {
			// 返回上一页
			toBack() {
				uni.navigateBack({ delta: 1 })
			},
			
			// 初始化回显数据
			initData() {
				this.repairList.forEach((item, i) => {
					if (i === this.index) {
						item.list.forEach(j => {
							if (j.prop === 'repairNo') {
								this.list = j.repairNoList
							}
						})
					}
				})
			},
			
			// 添加故障件条码
			add() {
				let obj = {
					MaterialTraceId: 0,
					NewTraceNum: '',
					OldTraceNum: '',
					RecordList: [],
				}
				
				this.list.push(obj)
			},
			
			// 保存
			save() {
				// 这里提交保存分为两种情况
				if (this.repairOrderItemId) {
					// 1、如果没有 repairOrderItemId 表示是新增，那么这里添加的所有条码都当作参数和添加任务一起提交
					let params = {
						RepairOrderItemId: this.repairOrderItemId,
						ItemList: this.list,
					}
					
					Utils.loading('数据提交中...')
					
					saveBarcodeList(params, this.token, this.longitude + ',' + this.latitude).then(res => {
						uni.hideLoading()
						Utils.popUpMsg('success', res.Message, 500)
						
						setTimeout(() => {
							// 返回上一页
							this.toBack()
						}, 500)
					}).catch(err => {
						uni.hideLoading()
					})
				} else {
					// 2、如果存在 repairOrderItemId 表示编辑或是草稿，那么这里提交保存时是需要调接口来提交数据
					this.$store.commit('repair/addComponentBarcode', { index: this.index, data: this.list })
					
					// 返回上一页
					this.toBack()
				}
			},
			
			// 扫码
			handleScan(index, prop) {
				// 获取当前页面
				let pages = getCurrentPages()
				let route = '/' + pages[pages.length - 1].route
				let querys = { index, prop }
				
				uni.navigateTo({ url: `/pages/scaner/scaner?prevPageUrl=${ route }&type=3&querys=${ JSON.stringify(querys) }` })
			},
			
			// 获取扫码结果
			getScanResult() {
				// 获取当前页
				let pages = getCurrentPages()
				let currentPage = pages[pages.length - 1]
				
				// 判断扫码结果是否存在
				if (currentPage.scanResult) {
					let scanResult = JSON.parse(currentPage.scanResult)
					
					if (scanResult.code === 200) {
						if (scanResult.type === 3) {
							// 扫码成功后处理逻辑
							let querys = JSON.parse(scanResult.querys)
							
							this.list.forEach((item, i) => {
								if (querys.index === i) {
									item[querys.prop] = scanResult.result
								}
							})
						}
					} else {
						Utils.popUpMsg('none', `扫码失败：${ scanResult.result }`)
					}
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/static/scss/variable.module.scss";
	
	.mainBgColor {
		background-color: $mainBgColor;
	}
	
	.navbar {
		height: 44px;
	}
</style>
